<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据统计</title>
    <link rel="stylesheet" href="/js/element-ui/element-ui.css">
    <script src="/js/vue.min.js"></script>
    <script src="/js/element-ui/element-ui.js"></script>
    <script src="/js/echarts.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
            background-color: #f5f7fa;
            color: #606266;
        }
        .app-container {
            padding: 20px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #ebeef5;
        }
        .filter-container {
            background: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .statistics-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .stat-card {
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
            transition: all 0.3s;
        }
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.2);
        }
        .card-title {
            font-size: 14px;
            color: #909399;
            margin-bottom: 12px;
        }
        .title-up {
            float: right;
            font-size: 20px;
            cursor: pointer;
            color: #f56c6c;
        }
        .card-value {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #303133;
        }
        .value-up {
            color: #f56c6c;
            float: right;
        }
        .card-trend {
            display: flex;
            align-items: center;
            font-size: 14px;
        }
        .trend-up {
            color: #f56c6c;
        }
        .trend-down {
            color: #67c23a;
        }
        .chart-container {
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
            height: 400px;
        }
        .footer {
            text-align: center;
            margin-top: 30px;
            color: #909399;
            font-size: 14px;
        }
        @media (max-width: 768px) {
            .statistics-cards {
                grid-template-columns: 1fr;
            }
            .header {
                flex-direction: column;
                align-items: flex-start;
            }
            .header .el-button {
                margin-top: 10px;
                align-self: flex-end;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="app-container">
        <!-- 头部标题 -->
        <div class="header">
            <h2>数据统计</h2>
            <!--<el-button type="primary" icon="el-icon-download">导出报告</el-button>-->
        </div>

        <!-- 筛选区域 -->
        <!--<div class="filter-container">
            <el-form :inline="true" :model="filterForm" class="demo-form-inline">
                <el-form-item label="时间范围">
                    <el-date-picker
                            v-model="filterForm.dateRange"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="项目类型">
                    <el-select v-model="filterForm.projectType" placeholder="请选择项目类型">
                        <el-option label="全部类型" value=""></el-option>
                        <el-option label="研发类" value="1"></el-option>
                        <el-option label="生产类" value="2"></el-option>
                        <el-option label="服务类" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onFilter">查询</el-button>
                    <el-button @click="resetFilter">重置</el-button>
                </el-form-item>
            </el-form>
        </div>-->

        <!-- 统计卡片 -->
        <div class="statistics-cards">
            <div class="stat-card">
                <div class="card-title">项目数</div>
                <div class="card-value">{{projectNum}}</div>
                <!--<div class="card-trend">
                    <span class="trend-up"><i class="el-icon-top"></i> 12.5%</span>
                    <span style="margin-left: 10px;">较上月</span>
                </div>-->
            </div>
            <div class="stat-card">
                <div class="card-title">公司数</div>
                <div class="card-value">{{corNum}}</div>
                <!--<div class="card-trend">
                    <span class="trend-up"><i class="el-icon-top"></i> 8.3%</span>
                    <span style="margin-left: 10px;">较上月</span>
                </div>-->
            </div>
            <div class="stat-card">
                <div class="card-title">
                    <span>融资企业数</span>
                    <el-tooltip class="item" effect="light" content="导出医药企业" placement="top">
                        <span class="title-up" @click="exportMedCor"><i class="el-icon-collection"></i></span>
                    </el-tooltip>
                </div>
                <div class="card-value">{{medCorNum}}</div>
                <!--<div class="card-trend">
                    <span class="trend-up"><i class="el-icon-top"></i> 18.7%</span>
                    <span style="margin-left: 10px;">较上月</span>
                </div>-->
            </div>
            <div class="stat-card">
                <div class="card-title">
                    <span>投资企业数</span>
                    <el-tooltip class="item" effect="light" content="导出投资机构" placement="top">
                        <span class="title-up" @click="exportInvestName"><i class="el-icon-collection"></i></span>
                    </el-tooltip>
                </div>
                <div class="card-value">{{investNum}}</div>
                <!--<div class="card-trend">
                    <span class="trend-up"><i class="el-icon-top"></i> 18.7%</span>
                    <span style="margin-left: 10px;">较上月</span>
                </div>-->
            </div>
            <div class="stat-card">
                <div class="card-title">临床申请数</div>
                <div class="card-value">
                    <span>{{caNum}}</span>
                    <!--<span class="value-up">-</span>-->
                </div>
                <!--<div class="card-trend">
                    <span class="trend-down"><i class="el-icon-bottom"></i> 3.2%</span>
                    <span style="margin-left: 10px;">较上月</span>
                </div>-->
            </div>
            <div class="stat-card">
                <div class="card-title">临床公示数</div>
                <div class="card-value">
                    <span>{{ctNum}}</span>
                    <span class="value-up">{{ctaNum}}</span>
                </div>
                <!--<div class="card-trend">
                    <span class="trend-up"><i class="el-icon-top"></i> 5.6%</span>
                    <span style="margin-left: 10px;">较上月</span>
                </div>-->
            </div>
        </div>

        <!-- 图表区域 -->
        <!--<div class="chart-container">
            <div id="trendChart" style="width: 100%; height: 100%;"></div>
        </div>-->

        <!-- 底部信息 -->
        <!--<div class="footer">
            <p>数据更新时间: 2023-10-15 08:30 | 系统版本: v2.5.1</p>
        </div>-->
    </div>
</div>

<script>
    // 使用Element UI
    Vue.use(ELEMENT);

    new Vue({
        el: '#app',
        data() {
            return {
                projectNum: 0,
                corNum: 0,
                medCorNum: 0,
                investNum: 0,
                caNum: 0,
                ctNum: 0,
                ctaNum: 0,
                filterForm: {
                    dateRange: [],
                    projectType: ''
                },
                trendChart: null
            }
        },
        mounted() {
            this.initData();
            /*this.initChart();
            // 窗口调整大小时重置图表
            window.addEventListener('resize', () => {
                if (this.trendChart) {
                    this.trendChart.resize();
                }
            });*/
        },
        methods: {
            initData() {
                axios.get(`/cor/getReportResult`)
                    .then((response) => {
                        // 处理成功情况
                        this.projectNum = response.data.projectNum;
                        this.corNum = response.data.corNum;
                        this.medCorNum = response.data.medCorNum;
                        this.investNum = response.data.investNum;
                        this.caNum = response.data.caNum;
                        this.ctNum = response.data.ctNum;
                        this.ctaNum = response.data.ctaNum;
                    })
                    .catch((error) => {
                        // 处理错误情况
                        console.log(error);
                    });
            },
            exportInvestName() {
                window.open('/exportInvestName', '_blank');
            },
            exportMedCor() {
                window.open('/exportMedCor', '_blank');
            },
            onFilter() {
                this.$message({
                    message: '筛选条件已应用',
                    type: 'success'
                });
                // 这里通常会发送请求获取新数据
            },
            resetFilter() {
                this.filterForm = {
                    dateRange: [],
                    projectType: ''
                };
                this.$message({
                    message: '筛选条件已重置',
                    type: 'info'
                });
            },
            initChart() {
                // 初始化ECharts实例
                this.trendChart = echarts.init(document.getElementById('trendChart'));

                // 配置图表选项
                const option = {
                    title: {
                        text: '近半年数据趋势',
                        left: 'center',
                        textStyle: {
                            color: '#303133'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(255, 255, 255, 0.9)',
                        borderColor: '#ddd',
                        borderWidth: 1,
                        textStyle: {
                            color: '#333'
                        }
                    },
                    legend: {
                        data: ['项目数', '公司数', '投资人数', '临床申请', '临床公示'],
                        bottom: 10
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '60px',
                        top: '60px',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['4月', '5月', '6月', '7月', '8月', '9月'],
                        axisLine: {
                            lineStyle: {
                                color: '#909399'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#909399'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: ['#ebeef5'],
                                type: 'dashed'
                            }
                        }
                    },
                    series: [
                        {
                            name: '项目数',
                            type: 'line',
                            smooth: true,
                            data: [920, 932, 901, 934, 1090, 1258],
                            lineStyle: {
                                width: 3,
                                color: '#409EFF'
                            },
                            itemStyle: {
                                color: '#409EFF'
                            }
                        },
                        {
                            name: '公司数',
                            type: 'line',
                            smooth: true,
                            data: [320, 332, 301, 334, 340, 368],
                            lineStyle: {
                                width: 3,
                                color: '#67C23A'
                            },
                            itemStyle: {
                                color: '#67C23A'
                            }
                        },
                        {
                            name: '投资人数',
                            type: 'line',
                            smooth: true,
                            data: [3200, 3320, 3500, 3700, 4100, 4892],
                            lineStyle: {
                                width: 3,
                                color: '#E6A23C'
                            },
                            itemStyle: {
                                color: '#E6A23C'
                            }
                        },
                        {
                            name: '临床申请',
                            type: 'line',
                            smooth: true,
                            data: [150, 132, 161, 174, 180, 187],
                            lineStyle: {
                                width: 3,
                                color: '#F56C6C'
                            },
                            itemStyle: {
                                color: '#F56C6C'
                            }
                        },
                        {
                            name: '临床公示',
                            type: 'line',
                            smooth: true,
                            data: [120, 112, 121, 134, 130, 142],
                            lineStyle: {
                                width: 3,
                                color: '#909399'
                            },
                            itemStyle: {
                                color: '#909399'
                            }
                        }
                    ]
                };

                // 使用配置项渲染图表
                this.trendChart.setOption(option);
            }
        }
    });
</script>
</body>
</html>